import React, { FC, useState, useEffect } from 'react';
import { Chart, Geom, Axis, Coord, Guide, View } from 'bizcharts';
import { Empty } from 'antd';

import styles from './index.less';

const { Text } = Guide;

type BasicChart = {
  data: number;
  subTitle?: string;

  padding?: number[];
  height?: number;
  scale?: object;
};

const cols = {
  type: {
    range: [0, 1],
  },
  value: {
    sync: true,
  },
};

const colsView2 = {
  type: {
    tickCount: 2,
  },
};

const BasicColumn: FC<BasicChart> = (props) => {
  const {
    subTitle,
    // chart 配置
    data = 0,
    height = 260,
    padding = [40, 40, 60, 40],
    scale = cols,
  } = props;
  const [data1, setData1] = useState([]);
  const [data2, setData2] = useState([]);

  useEffect(() => {
    if (data) {
      const dataLen = (data + '').length;
      const showTotal = Math.pow(10, dataLen > 2 ? dataLen + 1 : 2);
      const data1 = [];
      const data2 = [];
      const step = Math.ceil(showTotal / 50);
      for (let i = 0; i <= showTotal; i = i + step) {
        const item1 = {};
        item1.type = `${i}`;
        item1.value = 10;
        data1.push(item1);

        const item = {};
        item.type = `${i}`;
        item.value = 10;
        if (i === data) {
          item.value = 14;
        }
        if (i > data) {
          item.value = 0;
        }
        data2.push(item);
      }
      setData1(data1);
      setData2(data2);
    }
  }, [data]);
  const emptyFlag = data === 0;
  return (
    <div>
      {subTitle ? <div className={styles.subtitle}>{subTitle}</div> : null}
      {emptyFlag ? (
        <div
          style={{
            height: `${height}px`,
            overflow: 'hidden',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
        </div>
      ) : (
        <Chart height={height} data={data} forceFit padding={padding} scale={scale}>
          <View data={data1}>
            <Coord
              type="polar"
              startAngle={(-9 / 8) * Math.PI}
              endAngle={(1 / 8) * Math.PI}
              radius={0.8}
              innerRadius={0.75}
            />
            <Geom type="interval" position="type*value" color="rgba(0, 0, 0, 0.09)" size={6} />
          </View>
          <View data={data1} scale={colsView2}>
            <Coord
              type="polar"
              startAngle={(-9 / 8) * Math.PI}
              endAngle={(1 / 8) * Math.PI}
              radius={0.55}
              innerRadius={0.95}
            />
            <Geom type="interval" position="type*value" color="rgba(0, 0, 0, 0.09)" size={6} />
          </View>
          <View data={data2}>
            <Coord
              type="polar"
              startAngle={(-9 / 8) * Math.PI}
              endAngle={(1 / 8) * Math.PI}
              radius={0.8}
              innerRadius={0.75}
            />
            <Geom
              type="interval"
              position="type*value"
              color={['value', '#3023AE-#53A0FD']}
              opacity={1}
              size={6}
            />
            <Guide>
              <Text
                position={['50%', '65%']}
                content={data}
                style={{
                  fill: '#262626',
                  fontSize: 32,
                  textAlign: 'center',
                  textBaseline: 'middle',
                }}
              />
            </Guide>
          </View>
        </Chart>
      )}
    </div>
  );
};

export default BasicColumn;
